import React, { useEffect, useCallback, useState } from 'react';
import { message, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import TableBox from './components/TableBox/index';
import columns from './components/TableBox/columns';
import AddOrEdit from './components/AddOrEdit';
import {
  fetchSlideList,
  fetchSlideSwitch,
  fetchSlideDelete,
  fetchSlideAdd,
  fetchSlideEdit,
  fetchSlideSeq,
} from '@/services/slide';
import styles from './index.less';

const slide = () => {
  const [pagination, setPagination] = useState({ current: 1 });
  const [tableList, setTableList] = useState<any[]>([]);
  const [total, setTotal] = useState<number>(0);
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const [flag, setFlag] = useState<string>('');
  const [sliceData, setSliceData] = useState<any>({});

  const getSlideList = useCallback(async (page) => {
    try {
      const { data, meta } = await fetchSlideList(page);
      setTableList(data);
      setTotal(meta.total);
    } catch (err) {
      message.error(err as any);
    }
  }, []);

  useEffect(() => {
    getSlideList({ current: 1 });
  }, []);

  const handleEdit = useCallback((record) => {
    setFlag('edit');
    setSliceData(record);
    setIsVisible(true);
  }, []);

  const handleSwitch = useCallback(
    async (id) => {
      const res = await fetchSlideSwitch(id);
      if (!res) {
        getSlideList({ current: 1 });
        message.success('操作成功');
      }
    },
    [getSlideList],
  );

  const handleDelete = useCallback(
    async (id) => {
      try {
        const res = await fetchSlideDelete(id);
        if (!res) {
          getSlideList({ current: 1 });
          message.success('删除成功');
        }
      } catch (err) {
        message.error(err as any);
      }
    },
    [getSlideList],
  );

  const handleSave = useCallback(
    async (value) => {
      const { id, seq } = value;
      const res = await fetchSlideSeq(id, { seq });
      if (!res) {
        await getSlideList({ current: 1 });
        message.success('操作成功');
      }
    },
    [getSlideList],
  );

  const getColumns = useCallback(
    () => columns({ handleEdit, handleSwitch, handleDelete, handleSave }),
    [columns, handleEdit, handleSwitch, handleDelete, handleSave],
  );

  const handleChangePage = useCallback(
    ({ current }) => {
      getSlideList({ current });
      setPagination({ current });
    },
    [getSlideList],
  );

  const handleAdd = useCallback(() => {
    setFlag('add');
    setIsVisible(true);
  }, []);

  const handleCancelWrite = useCallback(() => {
    setIsVisible(false);
  }, []);

  const handleSunbmit = useCallback(
    async (value) => {
      if (flag === 'add') {
        try {
          const res = await fetchSlideAdd(value);
          if (!res) {
            getSlideList({ current: 1 });
            setIsVisible(false);
            message.success('添加成功');
            setFlag('');
          }
        } catch (err) {
          message.error(err as any);
        }
      } else if (flag === 'edit') {
        try {
          const res = await fetchSlideEdit(sliceData.id, value);
          if (!res) {
            getSlideList({ current: 1 });
            setIsVisible(false);
            message.success('编辑成功');
            setFlag('');
          }
        } catch (err) {
          message.error(err as any);
        }
      }
    },
    [getSlideList, flag],
  );

  return (
    <div className={styles.tablebox}>
      <div className={styles.titlebox}>
        轮播图列表
        <Button type="primary" onClick={handleAdd} icon={<PlusOutlined />}>
          {' '}
          新增
        </Button>
      </div>
      <TableBox
        columns={getColumns()}
        dataSource={tableList}
        pagination={pagination}
        total={total}
        onChangePage={handleChangePage}
      />
      <AddOrEdit
        isModalVisible={isVisible}
        onCancelWrite={handleCancelWrite}
        flag={flag}
        onSubmit={handleSunbmit}
        sliceData={sliceData}
      />
    </div>
  );
};

export default slide;
